<template>
  <div>
    <el-dialog
    v-model="dialogVisible"
    title="新增"
    width="60%"
    :before-close="handleClose"
  >
    <div class="contents">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
      
      <el-form-item label="仓库名称" class="inputs">
         <el-input v-model="formInline.name" placeholder="请输入产品条码" clearable />
      </el-form-item>
      <el-form-item label="仓库地址" class="inputs">
         <el-input v-model="formInline.address" placeholder="请输入产品分类编号" clearable />
      </el-form-item>
      <el-form-item label="负责人" class="inputs">
         <el-input v-model="formInline.principal" placeholder="请输入单位编号" clearable />
      </el-form-item>
      <el-form-item label="排序" class="inputs">
         <el-input v-model="formInline.sort" placeholder="请输入单位编号" clearable />
      </el-form-item>
      <el-form-item label="仓储费(元)" class="inputs">
         <el-input v-model="formInline.warehousePrice" placeholder="请输入产品名称" clearable />
      </el-form-item>
      <el-form-item label="搬运费(元)" class="inputs">
         <el-input v-model="formInline.truckagePrice" placeholder="请输入产品规格" clearable />
      </el-form-item>
      <el-form-item label="备注" class="inputs"> 
         <el-input
v-model="formInline.remark" :autosize="{ minRows: 2, maxRows: 4 }"
         type="textarea" placeholder="请输入产品备注" clearable />
      </el-form-item>
      
    
    <el-form-item label="开启状态" class="inputs">
      <el-radio-group v-model="formInline.status" class="ml-4">
      <el-radio label="0" size="large">已开启</el-radio>
      <el-radio label="1" size="large">未开启</el-radio>
    </el-radio-group>
    </el-form-item>
   
   
  </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="btnAdd">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import {warehouseApi} from '@/api/erp/foundation/warehouse'
import { ref, watch, reactive,nextTick, onMounted ,onBeforeUnmount, computed} from "vue";
const dialogVisible = ref(false);
const emit = defineEmits(['update:modelValue', 'confirm'])
const initialState = () => ({
  id: "",
  address: "",
  name: "",
  principal: "",
  warehousePrice: "",
  truckagePrice: "",
  remark: "",
  status: "0", // 默认为"已开启"
  sort: ""
})
const formInline = reactive(initialState());
//新增
function btnAdd() {
  if(id.value){
    warehouseApi.update(formInline).then((res) => {
   
   if (res) {
     ElMessage({
       message: '操作成功',
       type: 'success'
     })
     // 触发确认事件（可选，用于父组件刷新）
     emit('confirm')
     // 关闭弹窗
     dialogVisible.value = false
   }
 })
  }else{
    warehouseApi.create(formInline).then((res) => {
   
   if (res) {
     ElMessage({
       message: '操作成功',
       type: 'success'
     })
     // 触发确认事件（可选，用于父组件刷新）
     emit('confirm')
     // 关闭弹窗
     dialogVisible.value = false
   }
 })
  }

}
// 关闭前处理（如点击右上角X）
const handleClose = (done) => {
  done() // 调用done关闭对话框
}
const id=ref("")
// 接收父组件参数
const props = defineProps({
		modelValue: {
			type: Boolean,
			default: false,
		},
    ids:{
      type:String,
      default:''
    }

	

	});
  //获取id
  watch(() => props.ids, (newVal) => {
  id.value = newVal;
  if (newVal) {
    console.log('获取都这个ids',id.value)
    getSpuDetailList(newVal)
  }
});
  watch(() => props.modelValue, (newVal) => {
  dialogVisible.value = newVal;
  if (newVal) {
    resetForm();
  }
});
//获取详情
function getSpuDetailList(){
  warehouseApi.details(id.value).then((res)=>{
    console.log('获取的详情',res)
    res.status=res.status.toString()
    Object.assign(formInline, res);

  })
}
//重置表单
const resetForm = () => {
  Object.assign(formInline, initialState());
  // 额外处理: 确保状态默认选中"已开启"
  formInline.status = "0";
}
//  在关闭时也重置表单
const closeDialog = () => {
  dialogVisible.value = false;
  resetForm(); // 关闭时重置
  emit('update:modelValue', false);
}


  watch(dialogVisible, (val) => {
  emit('update:modelValue', val)
})


</script>
<style scoped>
.m-2{
  position: relative;
  top: -9px;
}

.inputs{
  width: 260px;
}

.contents{

}
</style>